<template>
  <div class="security">
    <div class="header">
      <top-bar :barObj="barObj"/>
      <router-link tag="div" to="/setPayPsw" class="setting">
        <div class="arrow-up"></div>设置支付密码
        <i class="iconfont icon-you"></i>
      </router-link>
    </div>
    <div class="content">
      <div class="item" @click="switchCcount">账号切换</div>
    </div>
  </div>
</template>
<script>
import topBar from "@/components/topBar";
export default {
  name: "security",
  data() {
    return {
      barObj: {
        isBack: true,
        backVal: "",
        title: "账号安全",
        isIcon: true
      }
    };
  },
  components: {
    topBar
  },
  methods: {
    switchCcount() {
      localStorage.removeItem("zyUserData");
      localStorage.removeItem("zyLoginToken");
      localStorage.removeItem("zyToken");
      localStorage.removeItem("zyUserId");
      localStorage.removeItem("zyGameID");
      localStorage.removeItem("zyPassword");
      // localStorage.removeItem("guid");
      localStorage.removeItem("zyDownloadAppIsShow");
      this.$router.push("/login");
    }
  }
};
</script>
<style lang="stylus" scoped>
.security {
  .header {
    height: 1.98rem;
    padding-top: 0.54rem;
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(0, 174, 255, 1), rgba(0, 180, 255, 1), rgba(0, 120, 255, 1));

    .setting {
      width: 7.1rem;
      height: 1.3rem;
      line-height: 1.3rem;
      background: #FFF;
      border-radius: 0.2rem;
      margin: 0.3rem auto;
      position: relative;
      padding: 0 15px;
      box-sizing: border-box;

      .arrow-up {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 6px solid #fff;
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
      }

      i {
        float: right;
      }
    }
  }

  .content {
    width: 7.1rem;
    margin: 1rem auto;

    .item {
      height: 1.3rem;
      line-height: 1.3rem;
      text-align: center;
      background: #ffffff;
      border-radius: 0.2rem;
    }
  }
}
</style>


